<template>
  <el-badge :value="value" :hidden="!value" />
</template>

<script>
import { query } from "@/chaos/functions/common/Data";
import { SideMenuData } from "@/app/config";

export default {
  name: "DataBadge",
  data() {
    return {
      value: "",
    };
  },
  props: {
    link: {
      required: true,
      default: "",
    },
  },
  watch: {
    $route() {
      this.queryValue();
    },
  },
  created() {
    this.queryValue();
  },
  methods: {
    async queryValue() {
      const method = SideMenuData().get(this.link);
      if (!method) return;
      this.value = await query(method);
    },
  },
};
</script>
